<template>
  <MChart ref="chart" class="chart" />
</template>

<script>
export default {
  name: 'ShadowLine'
}
</script>
<script setup>
/**
 *     @desc    阴影折线图表
 *     @author  阳坤
 *
 * **/
import { ref, onMounted, defineProps, nextTick, watch, toRefs, reactive } from 'vue'
import * as echarts from 'echarts'
import { positionTips } from '@/utils/chartPositionTips'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  typeArr: {
    type: Array,
    default: () => []
  },
  xDate: {
    type: Array,
    default: () => []
  },
  seriesData: {
    type: Array,
    default: () => []
  }
})

// 转化为响应式数据
const { title, typeArr, xDate } = toRefs(props)

// ref标签
const chart = ref(null)

// 配置series 折线数量以及数据
const seriesArr = ref([])

watch(
  () => [props.seriesData, props.xDate],
  (newVal, oldVal) => {
    setTimeout(() => {
      init(newVal[0])
    })
  },
  { deep: true }
)

// 初始化
const init = dataArr => {
  seriesArr.value = []
  dataArr.forEach(item => {
    seriesArr.value.push({
      name: item.name,
      type: item.type || 'line', // 图形类型
      barWidth: 10, // 柱子宽度
      symbolSize: 10, // 设定实心点的大小
      smooth: true,
      symbol:
        'image://', // 可设置图标
      lineStyle: {
        width: 2,
        type: item.lineType, // 折线是虚线还是实线
        color: item.color || '#d0d8e4'
      },
      itemStyle: {
        // 这里是柱状图颜色
        color: item.color || '#d0d8e4'
      },
      label: {
        show: !item.showLabel, // 鼠标放上去显示数值
        color: item.color || '#d0d8e4'
      },
      axisLabel: {
        show: true,
        color: '#666666'
      },
      // stack: 'Total',//让数据一样的折线段从同一起点出发：取消  stack: 'Total'   这一行
      showSymbol: false,
      areaStyle: {
        opacity: 0.3,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, item.gradientColor)
      },
      emphasis: {
        focus: 'series'
      },
      markLine: item.markLine || false,
      data: item.data
    })
  })
  setTimeout(() => {
    nextTick(() => {
      chart.value.init(lineOption)
    })
  }, 500)
}

// 初始化
onMounted(() => {
  init(props.seriesData)
})

// 图表配置项
const lineOption = reactive({
  tooltip: {
    trigger: 'axis',
    position: positionTips
  },
  title: {
    text: title,
    left: -3,
    top: -3,
    textStyle: {
      color: '#333',
      fontSize: '13px'
    }
  },
  legend: {
    type: 'plain',
    icon: 'diamond',
    itemWidth: 10,
    itemHeight: 10,
    textStyle: {
      color: '#333333',
      fontSize: '14px',
      fontWeight: '600'
    },
    right: '0',
    itemStyle: {
      color: 'inherit'
    },
    data: typeArr
  },
  grid: {
    left: '2%',
    right: '2%',
    bottom: '3%',
    top: '18%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#d0d8e4',
          type: 'dashed'
        }
      },
      axisTick: { show: false },
      axisLabel: {
        show: true,

        color: '#666666'
      },
      boundaryGap: true, // 设置是否从起点 0 开始
      data: xDate
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        // 修改背景线条样式
        show: true, // 是否展示
        lineStyle: {
          color: '#d0d8e4', // 线条颜色
          type: 'dashed' // 线条样式，默认是实现，dashed是虚线
        }
      }
    }
  ],
  series: seriesArr
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
